{% load staticfiles %}
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Scrum Board</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{% static 'board/vendor/normalize.css' %}" media="screen" title="no title">
        <link rel="stylesheet" href="{% static 'board/css/board.css' %}" media="screen" title="no title">
        <!-- home script -->
        <script type="text/html" id="home-template">
            <h1>Welcome to my Scrum Board Project!</h1>
        </script>
        <!-- login script -->
        <script type="text/html" id="login-template">
            <form action="" method="post">
                <label for="id_username">Username</label>
                <input id="id_username" type="text" name="username" maxlength="30" required value="">
                <label for="id_password">Password</label>
                <input type="id_password" type="password" name="password" required value="">
                <button type="submit" name="submit">Login</button>
            </form>
        </script>
        <!-- header script -->
        <script type="text/html" id="header-template">
            <span class="title">Scrum Board Example</span>
            <% if(authenticated) { %>
                <nav>
                    <a href="/" class="button">Your Sprints</a>
                    <a href="#" class="logout button">Logout</a>
                </nav>
            <% } %>
        </script>
    </head>
    <body>
        <div id="content"></div>

        <script type="text/javascript" src="{% static 'board/vendor/jquery-3.1.1.js' %}">
        </script>
        <script type="text/javascript" src="{% static 'board/vendor/underscore.js' %}">
        </script>
        <script type="text/javascript" src="{% static 'board/vendor/backbone.js' %}">
        </script>

        <script id="config" type="text/json">
            {
                "models": {},
                "collections": {},
                "views": {},
                "router": null,
                "apiRoot": "{% url 'api-root' %}",
                "apiLogin": "{% url 'api-token' %}"
            }
        </script>

        <script type="text/javascript" src="{% static 'board/js/app.js' %}">
        </script>
        <script type="text/javascript" src="{% static 'board/js/models.js' %}">
        </script>
        <script type="text/javascript" src="{% static 'board/js/views.js' %}">
        </script>
        <script type="text/javascript" src="{% static 'board/js/router.js' %}">
        </script>
    </body>
</html>
